<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>polo-360</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/page-index.css">
    <link rel="stylesheet" href="css/animate.min.css">
</head>

<body>
    <!-- header 开始 -->
    <!-- 创建头部div header -->
    <div class="header w">
        <!-- 创建一个导航条 -->
        <ul class="nav">
            <li>
                <a href="javascript:viod(0)">HOME</a>
                <p>Back to home</p>
            </li>
            <li>
                <a href="javascript:viod(0)">PRODUCTS</a>
                <p>What we have for you</p>
            </li>
            <li>
                <a href="javascript:viod(0)">SERVICES</a>
                <p>Things we do</p>
            </li>
            <li>
                <a href="javascript:viod(0)">BLOG</a>
                <p>Follow our updates</p>
            </li>
            <li>
                <a href="javascript:viod(0)">CONTACK</a>
                <p>Ways to reach us</p>
            </li>
        </ul>
        <!-- 创建logo -->
        <div class="logo">
            <a href="">
                <img src="img/logo.png" alt="LOGO" title="polo360">
            </a>
        </div>
    </div>
    <!-- header 结束 -->
    <!-- banner 结束 -->
    <div class="banner w">
        <img src="img/banner/banner01.png" alt="">
        <div class="pinter-div ">
            <ul>
                <li>
                    <a href="javascript:viod(0)" class="active"></a>
                </li>
                <li>
                    <a href="javascript:viod(0)"></a>
                </li>
                <li>
                    <a href="javascript:viod(0)"></a>
                </li>
                <li>
                    <a href="javascript:viod(0)"></a>
                </li>
                <li>
                    <a href="javascript:viod(0)"></a>
                </li>
                <li>
                    <a href="javascript:viod(0)"></a>
                </li>
            </ul>
        </div>
    </div>
    <!-- banner 结束 -->
    <!-- content 开始 -->
    <div class="content w clearfix">
        <h1>Lorem ipsum dolor sit amet, consectertur adipisicing elit</h1>
        <ul class="content-list clearfix">
            <li class="animation-item ">
                <h2>Complete Solution</h2>
                <p class="h2-sub">A tool anything and everything you can think</p>
                <a class="img-container" href="javascript:viod(0)">
                    <img src="img/pic/pic1.jpg" alt="">
                </a>
                <p class="content-list-abstract">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem. Nemo enim ipsam voluptatem quia voluptas
                    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem</p>
                <a href="" class="lm">Learn More</a>
            </li>
            <li class="animation-item ">
                <h2>Complete Solution</h2>
                <p class="h2-sub">A tool anything and everything you can think</p>
                <a class="img-container" href="javascript:viod(0)">
                    <img src="img/pic/pic2.jpg" alt="">
                </a>
                <p class="content-list-abstract">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.</p>
                <a href="" class="lm">Learn More</a>
            </li>
            <li class="animation-item ">
                <h2>Complete Solution</h2>
                <p class="h2-sub">A tool anything and everything you can think</p>
                <a class="img-container" href="javascript:viod(0)">
                    <img src="img/pic/pic3.jpg" alt="">
                </a>
                <p class="content-list-abstract">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.</p>
                <a href="" class="lm">Learn More</a>
            </li>
        </ul>
    </div>
    <!-- content 结束 -->
    <!-- contact 开始 -->
    <div class="contact w clearfix">
        <div class="sc">
            <h2>Social Connection</h2>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium </p>
            <ul class="clearfix">
                <li class="sc-icon animation-item ">
                    <a href="javascript:viod(0)" class="rss"></a>
                </li>
                <li class="sc-icon animation-item ">
                    <a href="javascript:viod(0)" class="fb"></a>
                </li>
                <li class="sc-icon animation-item  ">
                    <a href="javascript:viod(0)" class="in"></a>
                </li>
                <li class="sc-icon animation-item ">
                    <a href="javascript:viod(0)" class="yt"></a>
                </li>
                <li class="sc-icon animation-item ">
                    <a href="javascript:viod(0)" class="tw"></a>
                </li>
            </ul>
            <h2 class="ns">Newsletter</h2>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
            <form action="">
                <input class="txt" type="text" placeholder="your email address">
                <button type="submit" class="btn">Subscribe</button>
            </form>
        </div>
        <div class="co">
            <h2>Contact</h2>
            <form action="javascript:viod(0)">
                <input class="txt" type="text" placeholder="your name">
                <input class="txt" type="email" placeholder="your email">
                <textarea class=tarea rows="" cols="" placeholder="message"></textarea>
                <button class="btn" type="submit">Send it</button>
            </form>
        </div>
        <div class="nu">
            <h2>News updates</h2>
            <ul>
                <li class="animation-item ">
                    <img src="img/pic/1.gif" title="firefox">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </li>
                <li class="animation-item ">
                    <img src="img/pic/2.gif" title="firefox">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </li>
                <li class="animation-item ">
                    <img src="img/pic/3.gif" title="firefox">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </li>
            </ul>
            <button class="btn">Vist Our Blog</button>
        </div>
    </div>
    <!-- contact 结束 -->
    <!-- footer 开始 -->


    <div class="footer">
        <div class="footer-container w">
            <p class="cr">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p>
        </div>
    </div>
    <!-- footer 结束 -->
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>